<template>
  <div class="container">
    <div class="div_box">
      <!-- <div class="item">
        <el-image :src="img" class="image"></el-image>
      </div> -->
      <div class="item">
        <div>告警总数</div>
        <div class="count" style="cursor: pointer;" @click="toDevice"><span><countTo :startVal='0' :endVal='alarmtotal' :duration='3000'></countTo></span></div>
      </div>
      <div class="item">
        <div>今日告警</div>
        <div class="count"><span><countTo :startVal='0' :endVal='todayalarmcount' :duration='3000'></countTo></span></div>
      </div>
      <div class="item">
        <div>未处理告警</div>
        <div class="count count3"><span><countTo :startVal='0' :endVal='untreatedcount' :duration='3000'></countTo></span></div>
      </div>
      <div class="item">
        <div>已处理告警</div>
        <div class="count count3"><span><countTo :startVal='0' :endVal='processed' :duration='3000'></countTo></span></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  reqAlarmTotal,
  reqTodayAlarmCount,
  reqHandlingStatusCount
} from "@api/apiDatav.js";
import { mapState } from "vuex";
import countTo from 'vue-count-to';

export default {
  components: {countTo},
  data() {
    return {
      img: require("@assets/images/datav/shebei.png"),
      todayalarmcount:0,
      alarmtotal:0,
      untreatedcount:0,
      processed:0,
    };
  },
  computed: {
    ...mapState(["user","datav","spacesManage"]),
  },
  watch: {
     // 当有实时告警，即刻更新最新数据
     'datav.infoSent'(val) {
      // console.log(val);
      // this.getStatistics(this.sentPjtId);   //每次实时告警更新请求接口消耗太大，所以自己动态加载
      this.untreatedcount++;
      this.alarmtotal++;
      this.todayalarmcount++;
      // this.getAlarmTotal()
      // this.getHandlingStatusCount()
    },
    'datav.sum'(val) {
      this.untreatedcount--;
    },
  },
  methods: {
    toDevice(){
      this.$router.replace({ name: 'alarm', params: { orgId: '1' ,orgName:''} });
    },
    // 告警总数
    async getAlarmTotal(){
      let res = await reqAlarmTotal({
        tenantId: this.user.tenantId,
        orgId: this.spacesManage.organizationInfo.orgId,
        roleName:this.user.roleName,
        userId:this.user.userId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.alarmtotal=res.data.count||0;
    },
    // 
    async getTodayAlarmCount(){
      let res = await reqTodayAlarmCount({
        tenantId: this.user.tenantId,
        orgId: this.spacesManage.organizationInfo.orgId,
        type:2,
        roleName:this.user.roleName,
        userId:this.user.userId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.todayalarmcount=res.data.row.todayCount||0;
    },
    // 告警处理统计
    async  getHandlingStatusCount(){
      let res = await reqHandlingStatusCount({
        tenantId: this.user.tenantId,
        orgId: this.spacesManage.organizationInfo.orgId,
        roleName:this.user.roleName,
        userId:this.user.userId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      res.data.row.forEach(item=>{
        if(item.status=='1'){
          this.untreatedcount=item.count;
        }else if(item.status=='3'){
          this.processed=item.count;
        }
      })
    }
  },
  created() {},
  mounted() {
    // this.getAlarmTotal()
    // this.getTodayAlarmCount()
    // this.getHandlingStatusCount()
  },
};
</script>

<style lang='less' scoped>.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}
.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}:~'@{vh}vh';
}
.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}
.top (@px, @attr: top) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.left (@px, @attr: left) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}
.right (@px, @attr: right) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}
.marginTop (@px, @attr: margin-top) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.container {
  // padding: 15px 20px;
  box-sizing: border-box;
  // .height(180);
  height: 100%;
  .fontSize(16);
  // display: flex;
  // flex-direction: column;
  .title {
    .marginTop(20);
    .height(28);
    .lineHeight(28);
    .marginLeft(20);
    display: flex;
    align-items: center;

    .line {
      .marginRight(6);
      .width(4);
      .height(14);
      display: block;
      background: #8777FF;
      border-radius: 1px;
    }

    .txt {
      .height(28);
      .fontSize(16);
      .lineHeight(28);
      font-weight: 600;
      color: #fff;
    }
  }

  .div_box {
    height: 100%;
    .fontSize(13);
    color: #ccc;
    display: flex;
    padding: 7% 2% 7% 2%;
    box-sizing: border-box;

    .item {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      >div:first-of-type{
                color: #8EA4E9;
            }
            
      .count {
        // color: #8777FF;
        .marginTop(20);

        span {
          .fontSize(30);
          color: #09E2F8;
          font-weight: 600;
        }
      }
    }
  }
}
</style>